<template>
    <div class="contaniner">
        
        <Banner style="background-color:rgba(255,255,255,0.6);margin-top: 60px;" :database="BannerBase"></Banner>

        <div id="playlist" style="margin-top: 20px;">
            <div class="container">
                <h3 class="title">推荐歌单</h3>
            </div>
            <div v-if="SongList !='' && SongList != null">
                <SonList :database="SongList" @getSongListinfo="getSongListinfo"></SonList>
            </div>
            <div v-else>

            </div>
        </div>

        <div id="playlist">
            <div class="container">
                <h3 class="title">推荐歌曲</h3>
            </div>
            <div v-if="Song != null && Song != ''">
                <SonList :database="Song"></SonList>
            </div>
            <div v-else>

            </div>
        </div>

        <div id="playlist">
            <div class="container">
                <h3 class="title">推荐歌手</h3>
            </div>
        
            <div class="consing" v-if="Singer != '' && Singer != null"> 
                <Singer @getSingerInfo="getSingerInfo" :dataBase="Singer"></Singer>
            </div>
        </div>

    </div>
</template>

<script>
import {mapMutations} from 'vuex'
import Banner from '@/components/Front/Banner/index.vue'
import SonList from '@/components/Front/Contentlist/list.vue'
import Singer from '@/components/Front/Singer/index.vue'
export default {
    components:{
        Banner,
        SonList,
        Singer
    },
    data(){
        return{
            Song:[],
            SongList:[],
            Singer:[],
            BannerBase:[]
        }
    },

    methods:{
        ...mapMutations('editfo',['changeDatas']),
        async getSong(){
            const res = await this.$axios.get("Song/GetAllSong")
            this.Song = res.splice(0,10)
        },

        async getSongList(){
            const res = await this.$axios.get("SongList/GetAll")
            this.SongList = res.splice(0,10)
        },

        async getSinger(){
            const res = await this.$axios.get("Singer/GetAll")
            this.Singer = res.splice(0,10)
        },
        getSongListinfo(val){
            this.changeDatas(val)
            console.log(val)
            this.$router.push('/layout/songlisdet')
        },
        getSingerInfo(val){
            this.changeDatas(val)
            this.$router.push('/layout/singerdetial')
        },
        async getBanner(){
            const res = await this.$axios.get(`/banner/getBannerPosition/${1}`)
            console.log("wewewewe")
            console.log(res)
            this.BannerBase = res
        }
    },
    created(){
        this.getSong()
        this.getSongList()
        this.getSinger()
        this.getBanner()
    }
}
</script>

<style lang="less" scoped>
.contaniner{
    position: relative;
    width: 100%;
    background: url("@/assets/13.jpg");
    height:100% ;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-top: 80px; 
}

#playlist{
    margin: 0 100px;
}

#playlist .container{
    margin: 0 100px;
    display: flex;
    justify-content: space-between;
    height: 80px;
    line-height: 80px;
    align-items: center;
    text-align: center;
    h3{
        width: 100%;
        margin-top: 20px;
        text-align: center;
        font-size: 30px;
    }
}
#playlist .content{
    margin: 0 140px;
}

.more{
    cursor: pointer;
}
</style>